<template>
  <div class="app-container">
    <!-- Tab分类 -->
    <el-tabs v-model="queryParams.lotteryType" @tab-click="handleTabClick">
      <el-tab-pane label="直选" name="1"></el-tab-pane>
      <el-tab-pane label="组三" name="2"></el-tab-pane>
      <el-tab-pane label="组六" name="3"></el-tab-pane>
    </el-tabs>

    <!-- 搜索框 -->
    <div class="search-container">
      <el-input v-model="searchQuery" placeholder="请输入票号进行模糊匹配" clearable style="width: 300px; margin-right: 10px" @keyup.enter.native="handleSearch" />
      <el-radio-group v-model="queryParams.statusType" @input="getList"  style=" margin-right: 10px;">
        <el-radio-button label="" key="">全部</el-radio-button>
        <el-radio-button label="1" key="1">正常</el-radio-button>
        <el-radio-button label="0" key="0">停售</el-radio-button>
      </el-radio-group>

       <el-input placeholder="请输入内容" type="number" v-model="maxByNumber" class="max-number input-with-select" style="width: 300px;" >
            <template slot="append">
                <el-button type="primary" @click="maxBugNo">一键设置最大购买数</el-button>
            </template>
        </el-input>
    </div>

    <!-- 内容区域 - 可根据需要添加具体内容 -->
    <div class="content-container">
      <!-- Loading效果 -->
      <div v-if="loading" class="loading-wrapper">
        <el-skeleton :rows="5" animated />
      </div>

      <!-- 数据内容 -->
      <div v-else>
        <div v-if="filteredTabList.length > 0">
          <el-row :gutter="20">
            <el-col v-for="(item, index) in filteredTabList" :key="item.lotteryNo || index" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="card-col">
              <el-card shadow="hover" class="lottery-card">
                <div class="card-body">
                  <p :class="item.statusType == '1' ? 'lottery-yes' : 'lottery-no'">{{ item.lotteryNo }}</p>
                </div>
                <div class="card-footer">
                  <div style="display: flex; justify-content: space-between">
                    <div style="margin-top: 15px; width: 49%">
                      <el-input placeholder="请输入" :disabled="item.statusType == '0'" v-model="item.buyNo" @blur="saveNUmber(item)" type="number" class="input-with-select">
                        <el-button slot="prepend" style="padding: 0">购买次数</el-button>
                      </el-input>
                    </div>
                    <div style="margin-top: 15px; width: 49%">
                      <el-input placeholder="请输入" type="number" v-model="item.maxBuyNo" @blur="saveNUmber(item)" class="input-with-select" style="">
                        <el-button slot="prepend" style="padding: 0">最大次数</el-button>
                      </el-input>
                    </div>
                  </div>

                  <div style="margin-top: 10px">
                    <el-button type="primary" size="mini" icon="el-icon-key" @click="handleHandle(item)" circle title="是否停售"></el-button>
                    <el-button type="success" size="mini" icon="el-icon-shopping-cart-full" @click="buyNo(item)" circle title="购买次数"></el-button>
                  </div>
                  <!-- <el-button size="mini" icon="el-icon-tickets" circle title="购买记录"></el-button> -->
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-empty description="暂无数据" v-if="filteredTabList.length === 0"></el-empty>
      </div>
    </div>
    <buyLog ref="buyLog"></buyLog>
  </div>
</template>

<script>
import { getBaseLotteryList, updateBaseLottery,maxBuyNo } from "@/api/bussiness";
import buyLog from "../modules/buyLog.vue";
export default {
  name: "Config",
  data() {
      return {
        maxByNumber: 0,
      // 当前激活的tab
      activeTab: "all",
      // 搜索关键词
      searchQuery: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 9999,
        lotteryType: "1",
        statusType: "",
      },
      // 配置列表（示例数据）
      tabList: [],
      // 加载状态
      loading: false,
    };
  },
  computed: {
    // 基于票号的模糊匹配过滤
    filteredTabList() {
      if (!this.searchQuery) {
        return this.tabList;
      }
      const query = this.searchQuery.toLowerCase();
      return this.tabList.filter(item => item.lotteryNo && item.lotteryNo.toLowerCase().includes(query));
    },
  },
  created() {
    this.getList();
  },
  components: {
    buyLog,
  },

    methods: {
        maxBugNo () {
            console.log("购买次数")
            console.log(this.maxByNumber)
            console.log(this.queryParams.lotteryType)
            if (this.maxByNumber<=0)
            {
                this.$modal.msgError("请输入最大购买数");
                return false
            }
            maxBuyNo({
                maxBuyNo: parseInt(this.maxByNumber),
                lotteryType: this.queryParams.lotteryType
            }).then(() => {
                this.$modal.msgSuccess("操作成功");
                this.maxByNumber = 0
                this.getList();
            })
        },
    buyNo(row) {
      console.log(row);

      this.$refs.buyLog.open(row);
    },
    /** 票号状态 */
    handleHandle(row) {
      const isText = row.statusType == "1" ? "停售" : "售卖";
      const text = "是否确认操作票号为" + row.lotteryNo + isText + "状态？";
      console.log(text);
      this.$modal
        .confirm(text)
        .then(function () {
          row.statusType = row.statusType == "1" ? "0" : "1";
          return updateBaseLottery(row);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("操作成功");
        })
        .catch(() => {});
    },

    saveNUmber(row) {
      updateBaseLottery(row)
        .then(() => {
          this.$modal.msgSuccess("操作成功");
        })
        .catch(() => {});
    },

    //获取参数值
    getList() {
      this.loading = true;
      this.searchQuery = "";
      getBaseLotteryList(this.addDateRange(this.queryParams)).then(response => {
        console.log("获取到的参数的值");
        console.log(response);
        this.tabList = response.rows || [];
        this.loading = false;
      });
    },
    /**
     * 处理tab切换
     */
    handleTabClick(tab) {
      console.log("切换到tab:", tab.name);
      this.searchQuery = "";
      // 在这里可以添加根据tab加载不同数据的逻辑
      this.getList();
    },
    /**
     * 处理搜索
     */
    handleSearch() {
      console.log("搜索关键词:", this.searchQuery);
      // 前端模糊搜索，无需调用接口
    },
    /**
     * 重置搜索
     */
    resetSearch() {
      this.searchQuery = "";
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-card__body {
    padding: 5px;
  }
  .el-input-group__append,
  .el-input-group__prepend {
    padding: 0;
  }
}
.input-with-select ::v-deep .el-input-group__append {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
  padding: 0 10px;

}
.search-container {
  margin: 20px 0;
  display: flex;
  align-items: center;
}

.content-container {
  margin-top: 20px;
}

.loading-wrapper {
  padding: 20px 0;
}

.card-col {
  margin-bottom: 20px;
}

.lottery-card {
  height: 100%;
  display: flex;
  flex-direction: column;

  .lottery-yes {
    font-size:38px;
    font-weight: bold;
    color: rgb(103, 194, 58);
    margin: 0;
  }

  .lottery-no {
    font-size: 38px;
    font-weight: bold;
    color: rgb(227, 37, 37);
    margin: 0;
  }

  .card-body {
    flex: 1;
    margin-bottom: 15px;

    .lottery-info {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      font-size: 14px;

      i {
        color: #909399;
        margin-right: 5px;
        font-size: 14px;
      }

      span {
        color: #606266;
      }
    }
  }

  .card-footer {
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #eee;

    .el-button {
      margin: 0 5px;
    }
  }
}

// 响应式布局
@media (max-width: 768px) {
  .search-container {
    flex-direction: column;
    align-items: stretch;

    .el-input {
      margin-bottom: 10px;
      width: 100% !important;
    }

    .el-button {
      margin-bottom: 10px;
    }
  }
}
</style>
